<template>
    <div class="component-ctrl-list">

        <!-- <div class="item-list" @click="itemOnClick('question')">
            <div class="list-left">常见问题</div>
            <div class="list-right">
                常见问题看这里!
                <image class="list-arrow" src="https://img.wlcod.com/novel/img/mine-arrow.webp" />
            </div>
        </div> -->

        <div class="item-list" @click="itemOnClick('history')">
            <div class="list-left">阅读记录</div>
            <div class="list-right">
                <image class="list-arrow" src="https://img.wlcod.com/novel/img/mine-arrow.webp" />
            </div>
        </div>

        <!-- todo 不同小程序im号不一样 -->
        <button class="item-list imbtn" open-type="im" :data-im-id="im || imCount">
            <div class="list-left">联系客服</div>
            <div class="list-right">
                工作日10：00-21：00
                <image class="list-arrow" src="https://img.wlcod.com/novel/img/mine-arrow.webp" />
            </div>
        </button>

    </div>
</template>


<script>
export default {
    props: {
        im: ''
    },
    data() {
        return {
            imCount: '30432587540'
        }
    },
    methods: {
        itemOnClick(type) {
            this.$emit('itemOnClick', type)
        }

    },
    mounted() {

    },
}
</script>

<style lang="less" scoped>
.component-ctrl-list {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;

    .item-list {
        width: 100%;
        padding: 19rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: row nowrap;

        &:first-child {

            margin-top: 21rpx;
        }

        .list-left {
            font-size: 30rpx;
            color: #333333;
        }

        .list-right {
            font-size: 24rpx;
            color: #7F7F7F;
            display: flex;
            justify-content: center;
            align-items: center;

            .list-arrow {
                width: 24rpx;
                height: 24rpx;
                margin-left: 12rpx;
            }
        }

    }

    .imbtn {
        position: relative;
        background-color: transparent;

        &::after {
            display: none;
        }

        .list-left {
            position: absolute;
            left: 0;
            top: 19rpx;
            line-height: 30rpx;
        }

        .list-right {
            line-height: 30rpx;
        }
    }
}
</style>